<template>
  <div class="layout">
   <el-container class="layout-container-demo" v-if="state.showMenu" style="height: 1100px; width: 1100px">
    <el-aside width="200px" class="aside">
       <!--系统名称+logo-->
       <div class="head">
          <div>
            <img src="./static/mlogo.png" alt="logo">
            <span>vue3 admin</span>
          </div>
        </div>
        <!--一条为了美观的线条-->
        <div class="line" />
        <el-menu
          background-color="#222832"
          text-color="#fff"
          :router="true"
        >
          <!--一级栏目-->
          <el-sub-menu index="1">
            <template #title>
              <span>Dashboard</span>
            </template>
            <!--二级栏目-->
            <el-menu-item-group>
              <el-menu-item index="/"><el-icon><DataLine /></el-icon>首页</el-menu-item>
              <el-menu-item index="/add"><el-icon><DataLine /></el-icon>添加商品</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
    </el-aside>
   </el-container>
    <!--右边内容布局-->
    <el-container v-else class="container">
      <Header/>
      <div class="main">
        <!--将 <router-view></router-view> 移到这里，并且用单标签-->
        <router-view />
      </div>
      <Footer></Footer>
    </el-container>

</div>
  
</template>

<script setup>
import { ref,reactive } from 'vue'
import { useRouter } from 'vue-router'
import Header from '@/components/Header.vue'
import { localGet, pathMap } from '@/utils'

// 不需要菜单的路径数组
const noMenu = ['/login']
const router = useRouter()
const state = reactive({
  showMenu: true, // 是否需要显示菜单
})
// 监听路由的变化
router.beforeEach((to, from, next) => {
  console.log('to='+to)
  console.log(to)
  if (to.path == '/login') {
    // 如果路径是 /login 则正常执行
    if (!localGet('NewbeeToken')) {
      console.log('login')
      next()
    } else {
      // 否则继续执行
      console.log('NewbeeToken')
      next({path: '/'})
      console.log('ok')
    }
  } else {
    // 如果不是 /login，判断是否有 token
    console.log(localGet('NewbeeToken'))
    if (!localGet('NewbeeToken')) {
      // 如果没有，则跳至登录页面
      next({path: '/login'})
    } else {
      // 否则继续执行
      next({path: '/'})
    }
  }
  state.showMenu = !noMenu.includes(to.path)
  document.title = pathMap[to.name]
})

</script>
<style scoped>
.content {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 100px);
  overflow: hidden;
}
.main {
  height: 100vh;
  overflow: auto;
  padding: 10px;
}
.aside {
  width: 200px!important;
  background-color: #222832;
}
.head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
.head > div {
  display: flex;
  align-items: center;
}

.head img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.head span {
  font-size: 20px;
  color: #ffffff;
}
.line {
  border-top: 1px solid hsla(0,0%,100%,.05);
  border-bottom: 1px solid rgba(0,0,0,.2);
}
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
